<template>
	<view class="page">
		<uni-header :show-back="true" title="设置"></uni-header>
		<view class="cell-group" v-if="user">
			<view class="cell">
				<label class="label">头像</label>
				<view class="value">
					<uni-uploader :custom="true" class="uploader" url="/api/users/avatar" name="avatar" :multiple="false" @on-success="uploadAvatarSuccess">
						<image :src="avatar|image" mode="aspectFill" class="avatar"></image>
						<view class="iconfont icon-angle-right"></view>
					</uni-uploader>
					
				</view>
				
			</view>
			<view class="cell">
				<label class="label">昵称</label>
				
				<uc-edit title="修改昵称" :fields="[{name:'nick_name', label:'昵称', value:user.nick_name}]"  @save="onProfileSave">
					<view class="value">
						<view class="value-text">{{user.nick_name ? user.nick_name: '去设置'}}</view>
						<view class="iconfont icon-angle-right"></view>
					</view>
				</uc-edit>
					
				
				
			</view>
			
			<view class="cell">
				<label class="label">手机号</label>
				<view class="value">
					{{user.phone}}
				</view>
			</view>
			
		</view>
		<view class="foot">
			<button class="btn-exit" @click="exit">退出登录</button>
		</view>
		
		<uni-network v-if="!networkState"></uni-network>
	
	</view>
</template>

<script>
import TokenManager from '@/mpf/token-manager';
	
export default {
	data() {
		return {
			user: null,
		}
	},
	onLoad() {
		
	},
	onShow(){
		this.initData();
	},
	computed:{
		
		avatar(){
			if(this.user && this.user.avatar){
				return this.user.avatar;
			}
			return global.DEFAULT_AVATAR;
		}
		
		
	},
	methods: {
		initData(){
			this.$api.userService.info().then(res => {
				this.user = res;
			})
		},
		
		/**
		 * 上传头像
		 */
		uploadAvatarSuccess(file){
			
			this.$set(this.user, 'avatar', file.url);
			
		},
		/**
		 * 保存用户信息
		 * @param {Object} body
		 */
		onProfileSave(body){
			console.log(body);
			this.$api.userService.updateProfile(body).then(res => {
				
				global.toast('保存成功');
				this.initData();
			})
		},
		exit(){
			this.$api.appService.logout().then(res => {
				TokenManager.clear();
				uni.reLaunch({
					url:"/pages/index/index"
				})
			})
			
		}
		
	}
}
</script>

<style lang="scss" scoped>
.page{
	display: flex;
	flex-direction: column;
}
.cell-group{
	flex:1;
	margin-top: 14rpx;
	
	
	.uploader{
		height: 76rpx;
		display: flex;
		align-items: center;
	}
	.cell{
		display: flex;
		height:110rpx;
		width:670rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding:0rpx;
		border-bottom: 1rpx solid rgba(234, 234, 234, 0.05);
		justify-content: space-between;
		align-items: center;
		font-size:32rpx;
		color:#FFFFFF;
		box-sizing: border-box;
		image{
			width:72rpx;
			height:72rpx;
			border-radius: 50%;
			background-color: rgba(25, 25, 25, 0.1);
			
		}
		.avatar{
			width:76rpx;
			height: 76rpx;
			border-radius: 50%;
			
		}
		
		&:last-child{
			border:0;
		}
		
		.value{
			display: flex;
			align-items: center;
			line-height: 44rpx;
			font-size: 28rpx;
			.icon-angle-right{
				margin-left:10rpx;
				color:#FFFFFF;
				font-size:32rpx;
			}
		}
		
		.input-box{
			width: 420rpx;
			
			
			input{
				font-size: 32rpx;
			}
		}
		
		.select-box{
			width: 420rpx;
			input{
				font-size: 32rpx;
			}
			.select-inner-group{
				width: 420rpx;
				display: flex;
				font-size:32rpx;
				align-items: center;
				
				justify-content: space-between;
				.unit{
					white-space: nowrap;
					
				}
				
				.iconfont{
					height: 50rpx;
					line-height: 50rpx;
				}
			}
			
		}
	}
	
}


.foot{
	height: 272rpx;
	.btn-exit{
		width: 590rpx;
		height: 108rpx;
		background: rgba(134,223,186,0.2);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #86DFBA;
		
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 3rpx;
		padding:0;
		line-height: 104rpx;
	}
}


</style>
